<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>

	<script type="text/babel"> /* 此处一定要写babel，表示里面写的不是js，而是jsx，靠babel翻译 */
		// 1.创建虚拟DOM
		const VDOM = (
			<h1 id="title">
				<span>Hello, React</span>	
			</h1>
		) /*此处一定不要写引号*/
		// 2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'));

    console.log(VDOM); // 就是一个对象
    console.dir(document.getElementById('test'));
    /*
      关于虚拟DOM：
      1.本质是Object类型的对象（一般对象）
      2.xuniDOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内补再用，无需真实DOM上那么多的属性。
      3.虚拟DOM最终会被React转化为真实DOM，在插入到页面中。
    */
    

	</script>
</body>
</html>